<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>初始化Vue2</title>
</head>
<body>
    <!-- 
        1. 要使用Vue必须创建一个Vue实例，且要传入一个配置对象(容器)
        2.Vue实例和容器是一一对应的
        3. 真实开发中只有一个Vue实例，且会配合着组件一起使用
        4. 插值表达式{{xxx}}中要写js表达式，且xxx会自动读取到data中的所有属性。
        5. 一旦data中的数据会发生改变，则页面中用到该数据的地方也会自动更新。
    -->
    <div id="root">
        <!-- 插值语法：{{}} -->
        <h1>Hello, {{name}}, 时间：{{Date.now()}}, {{1+1}}</h1>
    </div>
    <script type="text/javascript">
        // 设置为false以阻止vue在启动时生成生产提示。
        Vue.config.productionTip = false
        // 创建Vue实例
        const x = new Vue({
            // 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
            el: "#root", 
            // data中用于存储数据供el指定的容器使用
            data: {
                name: "LittleAnt",
                age: 22
            }
        })
    </script>
</body>
</html>